<ix-page-header class="page-header">
  <ix-reports-global-controls
    (diskOptionsChanged)="buildDiskReport($event)"
  ></ix-reports-global-controls>
</ix-page-header>

@if (visibleReports.length && activeReports) {
  <div
    class="master-container"
    [ixUiSearch]="searchableElements.elements.reporting"
  >
    <cdk-virtual-scroll-viewport [itemSize]="325" [minBufferPx]="325" [maxBufferPx]="325">
      <div *cdkVirtualFor="let key of visibleReports; let i = index" class="report-container">
        @if (activeReports[key] && activeReports[key].identifiers.length > 0) {
          <ix-report
            [report]="activeReports[key]"
            [identifier]="activeReports[key].identifiers[0]"
          ></ix-report>
        }
        @if (activeReports[key].identifiers.length === 0) {
          <ix-report
            [report]="activeReports[key]"
          ></ix-report>
        }
      </div>
      <div class="bottom-spacer"></div>
    </cdk-virtual-scroll-viewport>
  </div>
} @else {
  @for (_ of [1,2,3,4]; track _) {
    <div class="initial-loader">
      <mat-card></mat-card>
    </div>
  }
}

